<template>
	<!-- 有数据 -->
	<view class="list" v-if="true">
		<view class="item" v-for="(item, i) in 10" :key="i" @tap="selectAddress">
			<view class="icon">
				<u-image width="180rpx" height="180rpx" src="/static/images/a21.png"></u-image>
			</view>
			<view class="">
				<view class="user-info-wrap">
					<view class="user-info">
						<view class="name">易小博</view>
						<view class="age">183****1225</view>
						<view class="self">默认</view>
					</view>
					<view class="tool-box">
						<view class="tool-item" @tap="showCancelPop">
							<u-icon name="trash" color="#000000" size="18"></u-icon>
							<view class="">删除</view>
						</view>
						<view class="tool-item" @tap="editAddress">
							<u-icon name="edit-pen" color="#000000" size="18"></u-icon>
							<view class="">编辑</view>
						</view>
					</view>
				</view>
				<view class="mobile">
					辽宁省 沈阳市 浑南区 浦江东方大厦2006室
				</view>
			</view>
		</view>
	</view>
	<!-- 无数据 -->
	<view class="empty-box" v-else>
		<u-empty textColor="#000000" text="暂无地址~" mode="data" icon="/static/images/empty.png">
		</u-empty>
	</view>
	
	<view class="btn">
		<u-button throttleTime="1000" :customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="goAddressAdd">添加收货地址</u-button>
	</view>
	
	<!-- 删除模态框 -->
	<u-modal showCancelButton :show="cancelPop" title="删除地址" @cancel="cancelPop = false" @confirm="cancelPop = false" confirmColor="#516DDB">
		<view class="tip">是否要确定删除该地址？</view>
	</u-modal>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	const sourceType = ref('')
	onLoad(({source}) => {
		sourceType.value = source || ''
	})
	const cancelPop = ref(false)
	const showCancelPop = () => {
		cancelPop.value = true
	}
	const goAddressAdd = () => {
		uni.navigateTo({
			url: '/mine/address/add'
		})
	}
	// 选择地址
	const selectAddress = () => {
		if (sourceType.value == 'payment') {
			uni.navigateBack({
				delta: 1,
				success: () => {
					uni.$emit('select', '选中的地址信息')
				}
			})
		}
	}
	// 编辑
	const editAddress = () => {
		uni.navigateTo({
			url: '/mine/address/add'
		})
	}
</script>

<style lang="scss" scoped>
	.tip {
		font-size: 30rpx;
		color: #312C2A;
		text-align: center;
	}
	.empty-box {
		@include center(100%, 100vh);
	}
	.list {
		padding: 60rpx 26rpx 200rpx;
		.item {
			position: relative;
			margin-bottom: 30rpx;
			padding: 34rpx 38rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.icon {
				position: absolute;
				top: 0;
				right: 38rpx;
				z-index: 99;
			}
			
			.user-info-wrap {
				@include between(100%);
				.tool-box {
					position: relative;
					z-index: 999;
					@include start();
					.tool-item {
						@include start();
						margin-left: 24rpx;
						font-size: 24rpx;
						color: #000000;
						& >view {
							margin-left: 4rpx;
						}
					}
				}
			}
			.user-info {
				@include start();
				align-items: flex-end;
				.name {
					font-size: 32rpx;
					color: #312C2A;
				}
				.age {
					font-size: 26rpx;
					color: #606672;
					margin-left: 26rpx;
				}
				.self {
					@include center(86rpx, 38rpx);
					margin-left: 30rpx;
					background: linear-gradient(315deg, #4975EC 0%, #97B3FF 100%);
					border-radius: 7rpx;
					font-size: 26rpx;
					color: #fff;
				}
			}
			.mobile {
				margin-top: 38rpx;
				font-size: 26rpx;
				color: #606672;
			}
		}
	}
	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 999;
	}
</style>